<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-08-25 12:00:50
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的教学计划 -->
  <div id="container">
    <div class="content">
      <!-- 顶部标题 -->
      <div class="top">
        <span></span>
        <h3>我的教学计划</h3>
      </div>
      <!-- 视图切换 -->
      <div class="taps">
        <div class="line" @click="picRadio = 1">
          <h4 :class="{ tips_fs: picRadio == 1 }">列表视图</h4>
          <!-- <span :class="{ tips_color: picRadio == 1 }"></span> -->
        </div>
        <!-- <div class="gante" @click="picRadio = 2">
          <h4 :class="{ tips_fs: picRadio == 2 }">甘特视图</h4>
          <span :class="{ tips_color: picRadio == 2 }"></span>
        </div> -->
      </div>
      <!-- 视图展示 -->
      <div class="tableBox" v-show="picRadio == 1">
        <div class="tabHead">
          <h3>我的教学计划</h3>
          <el-select v-model="grade" placeholder="请选择" @change="selectGrade">
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span @click="showEdit" v-if="jxjh_edit == 1">
            <i class="el-icon-edit">修改教学计划</i>
          </span>
        </div>
        <!-- 展示我的计划 -->
        <div class="tableData">
          <div class="tablelist">
            <span class="left">教学计划</span>
            <span>教学时间</span>
          </div>
          <div
            class="tablelist"
            v-for="(item, index) in tableData"
            :key="index"
            :class="{
              nowPlan:
                new Date().getTime() >= new Date(item.start_date).getTime() &&
                new Date().getTime() <= new Date(item.end_date).getTime(),
            }"
          >
            <span class="left" v-if="!item.kejianchapters_id">{{
              item.title
            }}</span>
            <span class="left" v-if="item.kejianchapters_id">{{
              item.kejianbooks_title + item.kejianchapters_title
            }}</span>
            <div
              class="planNow"
              v-if="
                new Date().getTime() >= new Date(item.start_date).getTime() &&
                new Date().getTime() <= new Date(item.end_date).getTime()
              "
            >
              <img src="../../../assets/img/planNow.png" alt="" />
            </div>
            <span>{{ item.start_date + "至" + item.end_date }}</span>
          </div>
        </div>
        <!-- <el-table :data="tableData" border style="width: 840px" stripe>
          <el-table-column label="教学计划" width="419">
            <template slot-scope="scope">
              <div class="left" v-if="scope.row.kejianbooks_title" >
                <span >{{
                scope.row.kejianbooks_title +
                " " +
                scope.row.kejianchapters_title
              }}</span>
              </div>
              <span v-if="scope.row.title">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="教学时间" width="420">
            <template slot-scope="scope">
              <div class="right" v-if="scope.row.end_date" :class="{nowPlan:scope.row.start_date == start && scope.row.end_date == end}">
                <span >{{
                scope.row.start_date + " " + "至" + " " + scope.row.end_date
              }}</span>
              </div>
              <span v-if="!scope.row.end_date">{{ scope.row.start_date }}</span>
            </template>
          </el-table-column>
        </el-table> -->

        <!-- 修改我的计划弹窗 -->
        <div class="editPlan">
          <el-dialog
            :visible.sync="dialogVisible"
            width="960px"
            :close-on-click-modal="tipsClose"
            :show-close="false"
          >
            <div class="editPlanbox">
              <h2>我的教学计划</h2>
              <span class="closeDialog" @click="closeDialog"
                ><i class="el-icon-close"></i
              ></span>
              <!-- 选择年级 -->
              <div class="choseGrade">
                <p>选择教学年级</p>
                <el-radio-group v-model="grade" @change="selectGrade2">
                  <el-radio
                    :label="item.id"
                    v-for="(item, index) in gradeList"
                    :key="index"
                    >{{ item.title }}</el-radio
                  >
                </el-radio-group>
              </div>
              <!-- 选择学科版本 -->
              <div class="choseClass">
                <p class="classTiele">选择学科版本</p>
                <div class="classTaps">
                  <div
                    class="classRadio"
                    v-for="item in versionslists"
                    :key="item.id"
                    @click="changeClass(item.id)"
                  >
                    <div class="tips1 tips" v-if="kejianversions_id != item.id">
                      <span></span>
                    </div>
                    <div class="tips2 tips" v-if="kejianversions_id == item.id">
                      <span></span>
                    </div>
                    <p>{{ item.title }}</p>
                  </div>
                </div>
              </div>
              <div class="myPlan">我的教学计划：</div>
              <div class="tableHeadr">
                <div class="plan">
                  <i class="el-icon-document"></i>
                  <p>教学计划</p>
                </div>
                <div class="time">
                  <i class="el-icon-date"></i>
                  <p>教学时间</p>
                </div>
              </div>

              <el-collapse v-model="activeNames" accordion>
                <!-- 关键时间节点 -->
                <el-collapse-item>
                  <template slot="title">
                    <div class="title">
                      <h4>关键时间节点</h4>
                    </div>
                  </template>
                  <div
                    class="guanjian"
                    v-for="(item, index) in guanjianTime"
                    :key="index"
                    @click="choseGuanjianList(index)"
                    :class="{
                      nowPlan:
                        new Date().getTime() >=
                          new Date(item.start_date).getTime() &&
                        new Date().getTime() <=
                          new Date(item.end_date).getTime(),
                    }"
                  >
                    <div
                      class="planNow"
                      v-if="
                        new Date().getTime() >=
                          new Date(item.start_date).getTime() &&
                        new Date().getTime() <=
                          new Date(item.end_date).getTime()
                      "
                    >
                      <img src="../../../assets/img/planNow.png" alt="" />
                    </div>
                    <h4>{{ item.title }}</h4>
                    <el-date-picker
                      v-model="guanjianVlaue"
                      type="daterange"
                      range-separator="至"
                      :start-placeholder="item.start_date"
                      :end-placeholder="item.end_date"
                      value-format="yyyy-MM-dd"
                      @change="choseGuanjianTime"
                    >
                    </el-date-picker>
                  </div>
                </el-collapse-item>
                <!-- 书本教学计划 -->
                <el-collapse-item
                  :name="item.kejianbooks_id"
                  v-for="(item, bookindex) in setTeachPlan"
                  :key="item.kejianbooks_id"
                >
                  <template slot="title">
                    <div class="title">
                      <h4>{{ item.kejianbooks_title }}</h4>
                    </div>
                  </template>
                  <div
                    class="danyuan"
                    v-for="(list, cherindex) in item.lists"
                    :key="cherindex"
                    @click="
                      choseList(bookindex, cherindex, list.kejianchapters_id)
                    "
                    :class="{
                      nowPlan:
                        new Date().getTime() >=
                          new Date(list.start_date).getTime() &&
                        new Date().getTime() <=
                          new Date(list.end_date).getTime(),
                    }"
                  >
                    <h5>{{ list.kejianchapters_title }}</h5>
                    <div
                      class="planNow"
                      v-if="
                        new Date().getTime() >=
                          new Date(list.start_date).getTime() &&
                        new Date().getTime() <=
                          new Date(list.end_date).getTime()
                      "
                    >
                      <img src="../../../assets/img/planNow.png" alt="" />
                    </div>
                    <el-date-picker
                      v-model="dateTime"
                      type="daterange"
                      range-separator="至"
                      :start-placeholder="list.start_date"
                      :end-placeholder="list.end_date"
                      value-format="yyyy-MM-dd"
                      @change="choseTime"
                    >
                    </el-date-picker>
                  </div>
                </el-collapse-item>

                <div class="submit" @click="submitPlan">
                  <span>保存提交</span>
                </div>
              </el-collapse>
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 甘特视图展示 -->
      <div class="tableBox" v-show="picRadio == 2">
        <!-- <Gantt class="left-container" :tasks="tasks"></Gantt> -->
      </div>
    </div>
  </div>
</template>

<script>
import Gantt from "./components/gantt";
import {
  userinfo,
  myplan,
  nianjilists,
  versionslists,
  nowkemu,
  setmyplan,
  mytimeline,
  setmytimeline,
  zyzxinfo,
} from "../../../api/http";
import { timeStamp2String } from "../../../utils/time";
export default {
  components: { Gantt },
  data() {
    return {
      start: "", //当前计划的开始日期
      end: "", //当前计划的结束日期
      timeStamp2String, //时间戳转换
      picRadio: 1, //切换视图值
      tipsClose: false, //取消点击遮罩层关闭修改教学计划弹窗的功能
      jxjh_edit: "", //是否有权限编写教学计划
      dialogVisible: false, //修改教学计划弹窗的显示隐藏
      gradeList: [], //年级列表
      grade: "", //选择的年级id
      kemu_id: "", //当前科目id
      kejianversions_id: "", //版本id
      tableData: [], //我的教学计划列表
      setTeachPlan: [], //设置教学计划的计划列表
      guanjianTime: [], //关键时间节点列表
      radio1: 1, //修改教学计划中的选择教学年级值
      radio2: 1, //修改教学计划中选择学科版本值
      activeNames: "", //修改教学计划中的栅格值
      versionslists: [], //版本列表
      dateTime: [], //暂存以选好的时间周期
      guanjianVlaue: [], //暂存选好的关键时间值
      nowGjIndex: "", //当前选择的关键时间的index值
      nowBookIndex: "", //当前选择的书本索引
      nowCherIndex: "", //当前选择的目录索引
      // nowBookIndex:'',//当前选择的书本索引
      newPlan: [], //教学计划列表中的单元列表组成新的数组newPlan
    };
  },
  created() {
    //通过资源中心的接口获取目前计划的开始和结束时间
    zyzxinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      // console.log(res);
      const data = res.retRes;
      this.start = data.start_date;
      this.end = data.end_date;
      console.log(this.start, this.end, "开始时间和结束时间");
    });
    //获取当前用户信息
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        // console.log(res, "用户个人信息");
        const data = res.retRes;
        this.grade = data.nianji_id;
        this.jxjh_edit = data.jxjh_edit;
        //获取当前科目和版本
        nowkemu({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retInt == 1) {
            // console.log(res, "获取当前科目和版本");
            const data = res.retRes;
            this.kemu_id = res.retRes.kemu_id;
            this.kejianversions_id = data.kejianversions_id;
            // console.log(this.grade);
            //拿到当前年级id和版本书id后
            //获取教学版本列表
            versionslists({
              kemu_id: this.kemu_id,
            }).then((res) => {
              // console.log(res, "版本列表");
              const data = res.retRes;
              this.versionslists = data;
              if (res.retInt == 1) {
                this.versionslists = data;
              } else if (res.retInt != 1) {
                this.$notify.closeAll();
                this.$notify({
                  message: res.retErr,
                  duration: 2000,
                  showClose: false,
                });
              }
            });
            //获取我的部分展示计划数据
            myplan({
              md5key: localStorage.getItem("md5key"),
              nianji_id: this.grade, //年级id
              kejianversions_id: this.kejianversions_id, //版本id
              show_all: 0,
            }).then((res) => {
              if (res.retInt != 1 && res.retErr != "loginerr") {
                this.$notify.closeAll();
                this.$notify.error({
                  title: "获取计划失败",
                  message: res.retErr,
                  duration: 2000,
                  showClose: false,
                });
              } else if (res.retInt != 1 && res.retErr == "loginerr") {
                this.$notify.closeAll();
                this.$notify({
                  title: "登录错误",
                  message: "您还未登录，正在前往登录页面",
                  type: "warning",
                  showClose: false,
                });
              } else {
                // console.log(res, "我的计划数据");
                const data = res.retRes;
                this.setTeachPlan = data;
                this.tableData = [];
                for (let i = 0; i < data.length; i++) {
                  for (let x = 0; x < data[i].lists.length; x++) {
                    this.tableData.unshift(data[i].lists[x]);
                  }
                }
                //获取关键时间节点
                mytimeline({
                  md5key: localStorage.getItem("md5key"),
                  nianji_id: this.grade,
                  show_all: 0,
                }).then((res) => {
                  if (res.retInt == 1) {
                    // console.log(res, "关键时间节点");
                    this.guanjianTime = res.retRes;
                    const data = res.retRes;
                    for (let i = 0; i < data.length; i++) {
                      this.tableData.unshift(data[i]);
                    }
                    this.tableData = this.tableData.sort(function (a, b) {
                      // return b - a
                      return (
                        new Date(a.start_date).getTime() -
                        new Date(b.start_date).getTime()
                      );
                    });
                    console.log(this.tableData, "要展示的tableData");
                  } else {
                    this.$notify.closeAll();
                    this.$notify({
                      message: res.retErr,
                      duration: 2000,
                      showClose: false,
                    });
                  }
                });
              }
            });
          } else {
            this.$notify.closeAll();
            this.$notify({
              title: "错误",
              message: res.retErr,
              type: "warning",
              showClose: false,
            });
          }
        });
      } else {
        this.$notify.closeAll();
        this.$notify({
          title: "错误",
          message: res.retErr,
          type: "warning",
          showClose: false,
        });
      }
    });

    //获取年级列表数据
    nianjilists().then((res) => {
      console.log(res, "年级列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.gradeList = data;
      } else if (res.retInt != 1) {
        this.$notify.closeAll();
        this.$notify.error({
          title: "错误",
          message: res.retErr,
          showClose: false,
        });
      }
    });
  },
  mounted() {},
  methods: {
    //点击关闭修改计划框
    closeDialog() {
      this.dialogVisible = false;
      //获取我的部分展示计划数据
      myplan({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.grade, //年级id
        kejianversions_id: this.kejianversions_id, //版本id
        show_all: 0,
      }).then((res) => {
        if (res.retInt != 1 && res.retErr != "loginerr") {
          this.$notify.closeAll();
          this.$notify.error({
            title: "获取计划失败",
            message: res.retErr,
            showClose: false,
          });
        } else if (res.retInt != 1 && res.retErr == "loginerr") {
          this.$notify.closeAll();
          this.$notify({
            title: "登录错误",
            message: "您还未登录，正在前往登录页面",
            type: "warning",
            showClose: false,
          });
        } else {
          console.log(res, "我的计划数据");
          const data = res.retRes;
          this.setTeachPlan = data;
          this.tableData = [];
          for (let i = 0; i < data.length; i++) {
            for (let x = 0; x < data[i].lists.length; x++) {
              this.tableData.unshift(data[i].lists[x]);
            }
          }
          //获取关键时间节点
          mytimeline({
            md5key: localStorage.getItem("md5key"),
            nianji_id: this.grade,
            show_all: 0,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "关键时间节点");
              this.guanjianTime = res.retRes;
              const data = res.retRes;
              for (let i = 0; i < data.length; i++) {
                this.tableData.unshift(data[i]);
              }
              this.tableData = this.tableData.sort(function (a, b) {
                // return b - a
                return (
                  new Date(a.start_date).getTime() -
                  new Date(b.start_date).getTime()
                );
              });
              // console.log(this.tableData, "要展示的");
            } else {
              this.$notify.closeAll();
              this.$notify({
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      });
    },
    //切换年级
    selectGrade(e) {
      //切换年级后重新获取我的计划数据
      console.log(e, "1233435");
      //获取我的部分展示计划数据
      myplan({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.grade, //年级id
        kejianversions_id: this.kejianversions_id, //版本id
        show_all: 0,
      }).then((res) => {
        if (res.retInt != 1 && res.retErr != "loginerr") {
          this.$notify.closeAll();
          this.$notify.error({
            title: "获取计划失败",
            message: res.retErr,
            showClose: false,
          });
        } else if (res.retInt != 1 && res.retErr == "loginerr") {
          this.$notify.closeAll();
          this.$notify({
            title: "登录错误",
            message: "您还未登录，正在前往登录页面",
            type: "warning",
            showClose: false,
          });
        } else {
          console.log(res, "我的计划数据");
          const data = res.retRes;
          this.setTeachPlan = data;
          this.tableData = [];
          for (let i = 0; i < data.length; i++) {
            for (let x = 0; x < data[i].lists.length; x++) {
              this.tableData.unshift(data[i].lists[x]);
            }
          }
          //获取关键时间节点
          mytimeline({
            md5key: localStorage.getItem("md5key"),
            nianji_id: this.grade,
            show_all: 0,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "关键时间节点");
              this.guanjianTime = res.retRes;
              const data = res.retRes;
              for (let i = 0; i < data.length; i++) {
                this.tableData.unshift(data[i]);
              }
              this.tableData = this.tableData.sort(function (a, b) {
                // return b - a
                return (
                  new Date(a.start_date).getTime() -
                  new Date(b.start_date).getTime()
                );
              });
              // console.log(this.tableData, "要展示的");
            } else {
              this.$notify.closeAll();
              this.$notify({
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      });
    },
    //显示修改教学计划的内容
    showEdit() {
      this.dialogVisible = true;
      //获取我的部分展示计划数据
      myplan({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.grade, //年级id
        kejianversions_id: this.kejianversions_id, //版本id
        show_all: 1,
      }).then((res) => {
        if (res.retInt != 1 && res.retErr != "loginerr") {
          this.$notify.closeAll();
          this.$notify.error({
            title: "获取计划失败",
            message: res.retErr,
            showClose: false,
          });
        } else if (res.retInt != 1 && res.retErr == "loginerr") {
          this.$notify.closeAll();
          this.$notify({
            title: "登录错误",
            message: "您还未登录，正在前往登录页面",
            type: "warning",
            showClose: false,
          });
        } else {
          console.log(res, "我的计划数据");
          const data = res.retRes;
          this.setTeachPlan = data;
          this.tableData = [];
          for (let i = 0; i < data.length; i++) {
            for (let x = 0; x < data[i].lists.length; x++) {
              this.tableData.unshift(data[i].lists[x]);
            }
          }
          //获取关键时间节点
          mytimeline({
            md5key: localStorage.getItem("md5key"),
            nianji_id: this.grade,
            show_all: 1,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "关键时间节点");
              this.guanjianTime = res.retRes;
              const data = res.retRes;
              for (let i = 0; i < data.length; i++) {
                this.tableData.unshift(data[i]);
              }
              this.tableData = this.tableData.sort(function (a, b) {
                // return b - a
                return (
                  new Date(a.start_date).getTime() -
                  new Date(b.start_date).getTime()
                );
              });
              // console.log(this.tableData, "要展示的");
            } else {
              this.$notify.closeAll();
              this.$notify({
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      });
    },
    //在修改教学计划中切换年级
    selectGrade2(e) {
      //切换年级后重新获取我的计划数据
      // console.log(this.kejianversions_id, "1233435");
      //获取我的部分展示计划数据
      myplan({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.grade, //年级id
        kejianversions_id: this.kejianversions_id, //版本id
        show_all: 1,
      }).then((res) => {
        if (res.retInt != 1 && res.retErr != "loginerr") {
          this.$notify.closeAll();
          this.$notify.error({
            title: "获取计划失败",
            message: res.retErr,
            showClose: false,
          });
        } else if (res.retInt != 1 && res.retErr == "loginerr") {
          this.$notify.closeAll();
          this.$notify({
            title: "登录错误",
            message: "您还未登录，正在前往登录页面",
            type: "warning",
            showClose: false,
          });
        } else {
          // console.log(res, "我的计划数据");
          const data = res.retRes;
          this.setTeachPlan = data;
          this.tableData = [];
          for (let i = 0; i < data.length; i++) {
            for (let x = 0; x < data[i].lists.length; x++) {
              this.tableData.unshift(data[i].lists[x]);
            }
          }
          //获取关键时间节点
          mytimeline({
            md5key: localStorage.getItem("md5key"),
            nianji_id: this.grade,
            show_all: 1,
          }).then((res) => {
            if (res.retInt == 1) {
              // console.log(res, "关键时间节点");
              this.guanjianTime = res.retRes;
              const data = res.retRes;
              for (let i = 0; i < data.length; i++) {
                this.tableData.unshift(data[i]);
              }
              this.tableData = this.tableData.sort(function (a, b) {
                // return b - a
                return (
                  new Date(a.start_date).getTime() -
                  new Date(b.start_date).getTime()
                );
              });
              // console.log(this.tableData, "要展示的");
            } else {
              this.$notify.closeAll();
              this.$notify({
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      });
    },
    //切换版本
    changeClass(id) {
      // console.log(id, "点击的版本id");
      this.kejianversions_id = id;
      //获取我的计划数据
      myplan({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.grade, //年级id
        kejianversions_id: this.kejianversions_id, //版本id
        show_all: 1,
      }).then((res) => {
        if (res.retInt != 1 && res.retErr != "loginerr") {
          this.$notify.closeAll();
          this.$notify.error({
            title: "获取计划失败",
            message: res.retErr,
            showClose: false,
          });
        } else if (res.retInt != 1 && res.retErr == "loginerr") {
          this.$notify.closeAll();
          this.$notify({
            title: "登录错误",
            message: "您还未登录，正在前往登录页面",
            type: "warning",
            showClose: false,
          });
        } else {
          // console.log(res, "我的计划数据");
          const data = res.retRes;
          this.setTeachPlan = data;
          this.tableData = [];
          for (let i = 0; i < data.length; i++) {
            for (let x = 0; x < data[i].lists.length; x++) {
              this.tableData.unshift(data[i].lists[x]);
            }
          }
          //获取关键时间节点
          mytimeline({
            md5key: localStorage.getItem("md5key"),
            nianji_id: this.grade,
            show_all: 1,
          }).then((res) => {
            if (res.retInt == 1) {
              // console.log(res, "关键时间节点");
              this.guanjianTime = res.retRes;
              const data = res.retRes;
              for (let i = 0; i < data.length; i++) {
                this.tableData.unshift(data[i]);
              }
              this.tableData = this.tableData.sort(function (a, b) {
                // return b - a
                return (
                  new Date(a.start_date).getTime() -
                  new Date(b.start_date).getTime()
                );
              });
              // console.log(this.tableData, "要展示的");
            } else {
              this.$notify.closeAll();
              this.$notify({
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      });
    },
    //选择关键时间节点
    choseGuanjianTime(e) {
      console.log(e, "选择的关键时间");
      this.guanjianTime[this.nowGjIndex].start_date = e[0];
      this.guanjianTime[this.nowGjIndex].end_date = e[1];
      this.guanjianVlaue = [];
      console.log(this.guanjianTime, "qeeqweqeqweqwe");
    },
    choseGuanjianList(index) {
      console.log(index);
      this.nowGjIndex = index;
    },
    //选择教学计划时间周期
    choseTime(e) {
      console.log(e, "选择的时间周期");
      // this.value = {...e}
      // console.log(this.value)
      // this.dateTime = e
      console.log(
        this.setTeachPlan[this.nowBookIndex].lists[this.nowCherIndex].start_date
      );
      this.setTeachPlan[this.nowBookIndex].lists[this.nowCherIndex].start_date =
        e[0];
      this.setTeachPlan[this.nowBookIndex].lists[this.nowCherIndex].end_date =
        e[1];
      this.dateTime = [];
    },
    choseList(bookindex, cherindex, id) {
      //拿到当前点击的书本id和目录id
      this.nowBookIndex = bookindex;
      this.nowCherIndex = cherindex;
      // console.log(bookindex,cherindex,id)
      // console.log(this.setTeachPlan[bookindex].lists[cherindex])
    },
    //提交教学计划
    submitPlan() {
      const that = this;
      //删除掉关键事件节点中不需要的参数
      this.guanjianTime.forEach((item) => {
        delete item.xueqi_title;
        delete item.nianji_title;
      });

      //取出教学计划列表中的单元列表组成新的数组newPlan
      this.setTeachPlan.forEach((item) => {
        that.newPlan.push(...item.lists);
      });
      // console.log(this.newPlan)
      this.newPlan.forEach((list) => {
        delete list.kejianbooks_id;
        delete list.kejianbooks_title;
        delete list.kejianchapters_title;
      });
      console.log(this.newPlan);
      //提交教学的时间计划
      setmyplan({
        md5key: localStorage.getItem("md5key"),
        plans: this.newPlan,
      }).then((res) => {
        if (res.retInt == 1) {
          this.$notify.closeAll();
          this.$notify({
            title: "修改教学计划成功",
            showClose: false,
          });
          //成功后修改关键时间节点
          setmytimeline({
            md5key: localStorage.getItem("md5key"),
            plans: this.guanjianTime,
          }).then((res) => {
            // console.log(res, "提交关键时间节点的情况");
            //修改成功后，重新加载。
            myplan({
              md5key: localStorage.getItem("md5key"),
              nianji_id: this.grade,
              kejianversions_id: this.kejianversions_id,
              show_all: 0,
            }).then((res) => {
              if (res.retInt != 1 && res.retErr != "loginerr") {
                this.$notify.closeAll();
                this.$notify.error({
                  title: "获取计划失败",
                  message: res.retErr,
                  showClose: false,
                });
              } else {
                // console.log(res, "我的计划数据");
                const data = res.retRes;
                this.setTeachPlan = data;
                this.tableData = [];
                console.log(this.tableData, "buzhouyi");
                for (let i = 0; i < data.length; i++) {
                  for (let x = 0; x < data[i].lists.length; x++) {
                    this.tableData.unshift(data[i].lists[x]);
                  }
                }
                console.log(this.tableData, "buzhouer");
                //重新获取关键事件节点
                mytimeline({
                  md5key: localStorage.getItem("md5key"),
                  nianji_id: this.grade,
                  show_all: 0,
                }).then((res) => {
                  if (res.retInt == 1) {
                    // console.log(res, "关键时间节点");
                    this.guanjianTime = res.retRes;
                    const data = res.retRes;
                    console.log(this.tableData, "buzbhou3");
                    for (let i = 0; i < data.length; i++) {
                      this.tableData.unshift(data[i]);
                    }
                    this.tableData = this.tableData.sort(function (a, b) {
                      // return b - a
                      return (
                        new Date(a.start_date).getTime() -
                        new Date(b.start_date).getTime()
                      );
                    });
                    console.log(this.tableData, "buzbhousi");
                    //通过资源中心的接口获取目前计划的开始和结束时间
                    zyzxinfo({
                      md5key: localStorage.getItem("md5key"),
                    }).then((res) => {
                      // console.log(res);
                      const data = res.retRes;
                      this.start = data.start_date;
                      this.end = data.end_date;
                    });
                  } else {
                    this.$notify.closeAll();
                    this.$notify({
                      message: res.retErr,
                      duration: 2000,
                      showClose: false,
                    });
                  }
                });
              }
            });
          });
        }
      });
      this.dialogVisible = false;
    },
  },
};
</script> 
<style >
/* .el-icon-close:before {
  color: #08a579;
} */
/* :-moz-placeholder {
  color: #333 !important;
}

::-moz-placeholder {
  color: #333 !important;
}
::-webkit-input-placeholder {
  color: #333 !important;
}
:-ms-input-placeholder {
  color: #333 !important;
} */
.el-select .el-input__inner:focus {
  border-color: #ccc;
}
.el-select-dropdown__item.selected {
  color: #08a579 !important;
  font-weight: 700;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ccc;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: #08a579 !important;
  background: #08a579 !important;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #08a579 !important;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #08a579 !important;
}
.el-date-table td.end-date span:hover {
  color: #fff !important;
}
.el-date-table td.end-date div:hover {
  color: #fff !important;
}
.el-date-table td.start-date span:hover {
  color: #fff !important;
}
.el-date-table td.start-date div :hover {
  color: #fff !important;
}
.el-date-table td span:hover {
  color: #08a579 !important;
}
.el-date-table td:hover {
  color: #08a579 !important;
}
.el-date-table td div:hover {
  color: #08a579 !important;
}
.el-date-table td.today span {
  color: #08a579 !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-left: 10px;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  /deep/.el-input--small .el-input__inner {
    // border: 0 !important;
  }
  :-moz-placeholder {
    color: #333 !important;
  }

  ::-moz-placeholder {
    color: #333 !important;
  }
  ::-webkit-input-placeholder {
    color: #333 !important;
  }
  :-ms-input-placeholder {
    color: #333 !important;
  }
  .content {
    user-select: none;
    .top {
      display: flex;
      margin: 30px 0px 40px 0px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    //视图选择
    .taps {
      display: flex;
      margin-left: 0px;
      text-align: center;
      width: 860px;
      border-bottom: 1px solid #e6e6e6;
      div {
        margin: 0 60px 0 20px;
        height: 36px;
        font-size: 14px;
        cursor: pointer;
        h4 {
          color: #939599;
        }
        span {
          display: inline-block;
          width: 32px;
          height: 3px;
        }
        .tips_fs {
          font-size: 16px;
          color: #333;
        }
        .tips_color {
          background-color: #08a579;
        }
      }
    }
    .el-select {
      width: 78px !important;
    }
    margin-left: 30px;
    .tableBox {
      margin-bottom: 10px;
    }
    .nowPlan {
      color: #08a579 !important;
      border: 1px solid #08a579 !important;
      border-bottom: 1px solid #08a579 !important;
      background-color: #ebfaf5 !important;
      h5 {
        color: #08a579 !important;
      }
      h4 {
        color: #08a579 !important;
      }
    }
    .tabHead {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      width: 838px;
      height: 48px;
      background: #f0f2f5;
      border: 1px solid #dee0e3;
      border-radius: 10px 10px 0px 0px;
      h3 {
        margin-left: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .el-select {
        margin-left: 20px;
        margin-right: 470px;
        width: 72px;
        height: 28px;
      }
      /deep/.el-select .el-input__inner {
        border-radius: 20px;
        padding-left: 13px;
        padding-right: 22px;
      }
      /deep/.el-select > .el-input {
        width: 100%;
      }
      span {
        margin-right: 20px;
        text-align: center;
        width: 128px;
        height: 28px;
        background: #ebfaf5;
        border-radius: 14px;
        color: #08a579;
        line-height: 28px;
        cursor: pointer;
        i {
          margin-left: 12px;
        }
      }
    }
    .tableData {
      width: 838px;
      border-left: 1px solid #dee0e3;
      border-right: 1px solid #dee0e3;
      .tablelist {
        position: relative;
        display: flex;
        border-bottom: 1px solid #dee0e3;
        span {
          display: inline-block;
          margin-left: 20px;
          line-height: 40px;
          width: 420px;
          height: 40px;
          color: #646566;
          font-size: 12px;
        }
        .left {
          width: 419px;
          border-right: 1px solid #dee0e3;
        }
        .planNow {
          position: absolute;
          top: 50%;
          left: 40%;
          transform: translateY(-35%);
        }
      }
      .tablelist:nth-of-type(2n + 1) {
        background: #fafafa;
      }
      .nowPlan {
        background-color: #ebfaf5 !important;
        border: 1px solid #08a579;
        border-bottom: 1px solid #08a579;
        span {
          color: #08a579 !important;
        }
      }
    }
    .editPlan {
      position: relative;

      /deep/.el-dialog {
        position: relative;

        margin-top: 5vh !important;
        overflow: hidden;
        width: 960px;
        height: 870px;
        background: #ffffff;
        border-radius: 20px;
      }
      /deep/.el-icon-close:before {
        color: #08a579;
      }
      /deep/.el-dialog__body {
        overflow: hidden;
        height: 100%;
        padding: 0;
        margin: 0 60px;

        .editPlanbox {
          position: relative;
          width: 900px;
          height: 800px;
          -ms-overflow-style: none; /* IE 10+ */
          scrollbar-width: none; /* Firefox */
          overflow-y: scroll;
          .closeDialog {
            position: absolute;
            top: 0px;
            right: 45px;
            font-size: 20px;
            cursor: pointer;
          }
          h2 {
            margin-bottom: 30px;
            text-align: center;
            font-size: 20px;
            color: #333;
          }
          .choseGrade {
            display: flex;
            margin-bottom: 30px;
            p {
              margin-right: 60px;
              font-size: 14px;
              color: #646566;
            }
            .el-radio {
              margin-right: 60px;
              margin-top: 3px;
            }
          }
          .choseClass {
            display: flex;
            margin-bottom: 30px;
            .classTiele {
              width: 142px;
            }
            .classTaps {
              display: flex;
              flex-wrap: wrap;
              .classRadio {
                display: flex;
                margin-bottom: 10px;
                width: 220px;
                .tips {
                  position: relative;
                  top: 2px;
                  margin-right: 8px;
                  width: 13px;
                  height: 13px;
                  border: 1px solid #cccccc;
                  border-radius: 100%;
                  line-height: 12px;
                  text-align: center;
                  span {
                    display: inline-block;
                    width: 9px;
                    height: 9px;
                    background-color: #fff;
                    border-radius: 100%;
                  }
                }
                .tips2 {
                  border: 1px solid #08a579;
                  span {
                    background-color: #08a579;
                  }
                }
              }
            }
          }
          .myPlan {
            margin-bottom: 18px;
          }
          .tableHeadr {
            display: flex;
            width: 838px;
            border: 1px solid #dee0e3;
            border-bottom: 0;
            height: 40px;
            font-size: 14px;
            background-color: #fafafa;
            div {
              display: flex;
              width: 420px;
              line-height: 40px;
              i {
                margin-left: 20px;
                margin-right: 6px;
                line-height: 40px;
              }
            }
            .plan {
              border-right: 1px solid #dee0e3;
            }
          }
          .guanjian {
            position: relative;
            display: flex;
            align-items: center;
            width: 838px;
            height: 40px;
            border: 1px solid #dee0e3;
            border-bottom: 0;
            .planNow {
              position: absolute;
              top: 50%;
              left: 40%;
              transform: translateY(-35%);
            }
            h4 {
              padding-left: 40px;
              line-height: 40px;
              color: #646566;
              width: 378px;
              height: 40px;
              font-size: 12px;
              border-right: 1px solid #dee0e3;
            }
          }
          .guanjian:last-of-type {
            border: 1px solid #dee0e3;
          }
          .el-collapse {
            width: 840px;
            height: 40px;
            background: #fafafa;
            /deep/.el-date-table td.end-date span,
            .el-date-table td.start-date span {
              background-color: #08a579 !important;
            }
            /deep/.el-date-table td span {
              background-color: #08a579 !important;
            }

            .el-collapse-item__header {
              height: 40px;
              border: 1px solid #dee0e3;
              border-top: 0;
            }
            .el-collapse-item__content {
              padding: 0;
            }
            .el-collapse-item__wrap {
              border: 0;
            }
            .title {
              border: 0;
              h4 {
                margin-left: 20px;
                width: 420px;
                color: #646566;
                line-height: 40px;
              }
            }
            .danyuan {
              position: relative;
              display: flex;
              // justify-content: space-between;
              width: 838px;
              border: 1px solid #dee0e3;
              border-top: 0;
              height: 40px;
              line-height: 40px;
              h5 {
                margin-left: 40px;
                border-right: 1px solid #dee0e3;
                width: 380px;
                color: #646566;
              }
              .el-input__inner {
                margin-top: 5px;
                // border: 0;
              }
              .planNow {
                position: absolute;
                top: 50%;
                left: 40%;
                transform: translateY(-35%);
              }
            }
            .danyuan:nth-of-type(2n-1) {
              background-color: #fafafa;
            }
          }
          .submit {
            display: inline-block;
            margin-left: 720px;
            margin-top: 20px;
            text-align: center;
            line-height: 40px;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
